<template>
  <div>
    <!-- 动态设置样式
      :style="对象/数组"
     -->
    <h1>动态设置样式</h1>
    <!-- 动态设置样式 对象的语法
      css样式属性(小驼峰 background-color => backgroundColor)： 值

     -->
    <div
      :style="{
        border: '1px solid black',
        boxShadow: '2px 2px 2px 2px',
        backgroundColor: 'teal',
      }"
      style="width: 100px; height: 100px; background: pink"
    ></div>
    <hr />
    <div :style="styleObjA"></div>
    <hr />
    <!-- 数组的写法，其实就是在数组里写多个对象，层叠样式表 样式会累加覆盖 -->
    <div :style="[styleObjA, styleObjB]"></div>
    <button @click="changeStyle">改变样式</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleObjA: {
        width: "100px",
        height: "100px",
        background: "red",
      },
      styleObjB: {
        width: "200px",
        border: "20px solid yellow",
        marginTop: "100px",
      },
    };
  },
  methods: {
    changeStyle() {
      this.styleObjB.marginTop = "0px";
    },
  },
};
</script>

<style>
</style>